<template>
  <div class="h-full">
    <h2 class="text-xl font-bold ml-[44px] mt-[30px]">壁纸</h2>
    <div class="wall-scroll">
      <div
        class="mx-auto flex w-[396px] flex-shrink-0 flex-wrap justify-between pt-[36px] pb-[32px] mb:w-full"
      >
        <div
          class="wallpaper-item group relative mb-[12px] h-[108px] w-[192px] overflow-hidden rounded-[6px] cursor-pointer"
          v-for="item in props.data"
          @click="handleClick(item.url)"
        >
          <img
            :src="item.url"
            :alt="item.name"
            class="h-full scale-100 transition-[transform] duration-300 group-hover:scale-[1.2]"
          />
          <!-- <div
            class="absolute inset-0 flex cursor-pointer items-center justify-center bg-color-black bg-opacity-20"
          >
            <span class="font-ali-75 text-[20px] text-color-white">自然</span>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import wall from "../assets/image/bg.jpg";

const props = defineProps<{
  data: any;
}>();

const emits = defineEmits(["changeWallpaper"]);
const handleClick = (item: string) => {
  // 应用壁纸
  emits("changeWallpaper", item);
};
</script>
<style scoped>
.wall-scroll {
  overflow: auto;
  scrollbar-color: rgba(0, 0, 0, 0.2);
  scrollbar-width: thin;
  height: calc(100% - 58px);
}
</style>
